<template>
  <div>
    <a-row :gutter="24">
      <a-col :xl="18" :lg="24">
        <a-card class="leftCard">
          <a-descriptions :title="`订单编号: ${data.code}`" :column="3">
            <a-descriptions-item label="审核状态">
              <a-badge :status="data.status | filterStatus(0)" :text="data.status | filterStatus(1)" />
            </a-descriptions-item>
            <a-descriptions-item label="供应商">
              {{ data.supplier }}
            </a-descriptions-item>
            <a-descriptions-item label="采购员">
              {{ data.purchaser }}
            </a-descriptions-item>
            <a-descriptions-item label="采购时间">
              {{ data.purchaseTime }}
            </a-descriptions-item>
            <a-descriptions-item label="审核员">
              {{ data.auditor }}
            </a-descriptions-item>
            <a-descriptions-item label="审核时间" v-if="data.status !== 2">
              {{ data.auditTime }}
            </a-descriptions-item>
            <a-descriptions-item label="审核时间" v-else>
              待审核....
            </a-descriptions-item>
            <a-descriptions-item label="采购备注">
              {{ data.purchaseRemark }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="24">
        <a-card class="rightCard">
          <a-row type="flex" align="middle" justify="space-between" :gutter="16">
            <a-col :xl="9">
              <div class="imgContainer">
                <img src="~@/assets/icons/wallet.png" width="70px">
              </div>
            </a-col>
            <a-col :xl="15">
              <h3 class="theme-title">订单总金额</h3>
              <p class="theme-number">
                <a-spin v-if="moneyLoading"/>
                <span v-else>{{ data.money.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</span>
              </p>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" class="bottomRow">
      <a-col :xl="18" :lg="24">
        <a-card>
          <a-divider orientation="left">
            物品信息
          </a-divider>
          <a-table
            :columns="columns"
            :pagination="false"
            rowKey="code"
            :data-source="data.supplies"
            :loading="tableLoading">
          </a-table>
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="24">
        <a-card class="auditCard">
          <a-divider orientation="left">审批</a-divider>
          <a-textarea
            placeholder="请输入审批信息..."
            v-model="auditRemark"
            :auto-size="{ minRows: 6, maxRows: 10 }"
            :disabled="data.status !== 2"/>
          <div class="buttonGroup">
            <a-button type="primary" icon="check" @click="submitAudit(0)" :disabled="data.status !== 2">通过</a-button>
            <a-button type="danger" icon="close" @click="submitAudit(1)" :disabled="data.status !== 2">驳回</a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { detail } from '@/api/purchase'
import { auditPurchase } from '@/api/audit'
export default {
  name: 'AuditPurchaseOrder',
  created () {
    this.code = this.$route.params.cd
    this.getData(this.code)
  },
  filters: {
    filterStatus (value, type) {
      if (value === 0) {
        return type === 0 ? 'success' : '已审核'
      } else if (value === 1) {
        return type === 0 ? 'error' : '已驳回'
      } else {
        return type === 0 ? 'processing' : '待审核'
      }
    }
  },
  computed: {
    columns () {
      return [
        {
          title: '物品编码',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '物品名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '类别',
          dataIndex: 'type',
          align: 'center'
        },
        {
          title: '单价',
          dataIndex: 'price',
          align: 'center'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'amount',
          align: 'center'
        }
      ]
    }
  },
  data () {
    return {
      code: null,
      data: {},
      moneyLoading: false,
      tableLoading: false,
      auditRemark: null
    }
  },
  methods: {
    getData (code) {
      const _this = this
      _this.moneyLoading = true
      _this.tableLoading = true
      detail(code)
      .then(res => {
        _this.data = res.data
        _this.auditRemark = res.data.auditRemark
      })
      .catch(err => {
        _this.$message.error(err.response.data.msg || '获取数据失败')
      })
      .finally(() => {
        _this.moneyLoading = false
        _this.tableLoading = false
      })
    },
    submitAudit (signal) {
      auditPurchase({
        code: this.code,
        signal: signal,
        auditRemark: this.auditRemark
      })
      .then(res => {
        this.$message.success('审核成功')
        this.$router.push('/audit/auditPurchase')
      })
      .catch(err => {
        this.$message.error(err.response.data.msg || '审核失败')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.leftCard {
  /deep/ .ant-card-body{
    padding: 18px;
    padding-right: 0px;
    padding-bottom: 0px;
  }
}
.rightCard {
  height: 178px;
  display: flex;
  align-items: center;
  /deep/ .ant-card-body{
    padding: 20px;
  }
  .theme-title {
    margin-top: 40px;
    font-size: 18px;
    line-height: 18px;
  }
  .theme-number {
    font-size: 27px;
    font-weight: bold;
    line-height: 28px;
  }
}
.imgContainer {
  text-align: center;
}
.ant-divider.ant-divider-horizontal {
  margin-top: 0px;
}
.ant-divider-horizontal.ant-divider-with-text-left {
  font-weight: 600;
  font-size: 18px;
}
.bottomRow {
  margin-top: 20px;
}
/deep/ .ant-table-thead > tr > th {
  padding: 14px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 12px 12px;
}
.buttonGroup {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
.auditCard {
  /deep/ .ant-card-body{
    padding: 20px;
  }
}
</style>
